<template>
  <view class="my-bills">
    <view class="tabs">
      <up-tabs
        @change="onCurrentTab"
        :list="myBillTabsList"
        :lineWidth="`25% - ${rpx2px(22)}px`"
        :line-height="rpx2px(11)"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
      />
    </view>

    <none-data v-if="(curIndex !== 0 && billDataList.length === 0) || (curIndex === 0 && propertyDataList.length === 0)" />

    <paymentCard v-if="curIndex !== 0 && curIndex !== 3" :listData="billDataList"></paymentCard>
    <broadbandBox
      v-if="curIndex === 3"
      :listData="billDataList"
      @on-click="handlebroadbandClick"
    ></broadbandBox>
    <broadbandBox
      v-if="curIndex === 0"
      :listData="propertyDataList"
      @on-click="handlebroadbandClick"
    ></broadbandBox>

    <view class="tail" v-if="(curIndex !== 0 && billDataList.length !== 0) && (curIndex === 0 && propertyDataList.length !== 0)">
      {{ tailText }}
    </view>
  </view>
</template>
<script setup>
import paymentCard from "@/package_kuafu_apartment/pages/my/components/payment/index.vue";
import broadbandBox from "@/package_kuafu_apartment/pages/my/components/broadband/index.vue";
import {
  getBroadbandOrderListApi,
  getPaymentLogListApi, getPropertyOrderListApi,
} from "@/package_kuafu_apartment/pages/api/my.js";
import { ref } from "vue";
import { rpx2px } from "@/utils/utils";
import { customNav } from "@/utils/customNav";
import { onReachBottom, onShow } from "@dcloudio/uni-app";
const curIndex = ref(0);
const myBillTabsList = ref([
  {
    name: "物业",
    value: 0,
  },
  {
    name: "水费",
    value: 1,
  },
  {
    name: "电费",
    value: 2,
  },
  {
    name: "宽带费",
    value: 3,
  },
]);
const pageData = ref({
  page: 1,
  size: 50,
  userPayStatus: 1

});
const billDataList = ref([]);
const propertyDataList = ref([]);

const tailText = ref("");
function handlebroadbandClick(item) {
  // console.log("item", item);
  // if (item.userPayStatus == 0) {
  //   customNav(`apply?information=${JSON.stringify(item)}`);
  // } else {
  //   customNav(`paid?information=${JSON.stringify(item)}`);
  // }
}
async function getWaterElectricityLog() {
  const option = {
    page: pageData.value.page,
    size: pageData.value.size,
    title:
      curIndex.value == 0
        ? "支付租赁订单"
        : curIndex.value == 1
        ? "水费充值"
        : "电费充值",
  };
  const res = await getPaymentLogListApi(option);
  const { code, data } = res || {};
  if (code == 200) {
    billDataList.value = billDataList.value.concat(data.records);
    if (billDataList.value.length !== data.total) {
      tailText.value = "下滑加载更多";
    } else {
      tailText.value = "没有更多内容";
    }
  }
}
function onCurrentTab(e) {
  console.log("sssssss", e);
  pageData.value.page = 1;
  billDataList.value = [];
  propertyDataList.value = [];
  curIndex.value = e.index;
  switch (curIndex.value) {
    case 0:
      getPropertyOrderList();
      break;
    case 3:
      getBroadbandOrderList();
      break;
    default:
      getWaterElectricityLog();
      break;
  }
}
async function getBroadbandOrderList() {
  const res = await getBroadbandOrderListApi(pageData.value);
  const { code, data } = res || {};
  if (code == 200) {
    console.log(data);
    billDataList.value = billDataList.value.concat(data.records);
    if (billDataList.value.length !== data.total) {
      tailText.value = "下滑加载更多";
    } else {
      tailText.value = "没有更多内容";
    }
  }
}
async function getPropertyOrderList() {
  const res = await getPropertyOrderListApi(pageData.value);
  const { code, data } = res || {};
  if (code == 200) {
    console.log(data);
    propertyDataList.value = propertyDataList.value.concat(data.records);
    if (billDataList.value.length !== data.total) {
      tailText.value = "下滑加载更多";
    } else {
      tailText.value = "没有更多内容";
    }
  }
}
onShow(() => {
  pageData.value.page = 1;
  billDataList.value = [];
  onCurrentTab({
    index: curIndex.value,
  });
});
onReachBottom(() => {
  if (tailText.value !== "没有更多内容") {
    pageData.value.page++;
    switch (curIndex.value) {
      case 3:
        getBroadbandOrderList();
        break;
      default:
        getWaterElectricityLog();
        break;
    }
  }
});
</script>
<style scoped lang=less>
@import "./style/my-bill";
</style>
